<template>
	<view>
		<view class="tabs-box">
			<view class="tabs-item-box" v-for="(item,index) in tabs" :key='index' @click="tabsChange(item)">
				<view class="text">
					{{item.name}}
				</view>
				<view :class="activeData == item.ID ? 'pitch-icon-box' : 'un-pitch-icon-box'"></view>
			</view>
		</view>
		<view class="commodity-list-box" v-if="activeData == '0'">
			<commodity-item v-for="(item,index) in commodityList" :key='index' :commodityInfo='item'></commodity-item>
		</view>
		<view class="discounts-box" :style="isLongpress ? 'height: calc(100vh - 270rpx);' : 'height: calc(100vh - 88rpx);'" v-else-if="activeData == '1'">
			<discounts-item v-for="(item, index) in discountsList" :key="index" :info='item'
				:isPitch="selectData.indexOf(item.id) > -1 ? true : false" @pitchClick='itemPitchClick'
				class="discounts-item-box" @longpress='longpress' :isLongpress='isLongpress'></discounts-item>
		</view>
		<view class="all-select-box" v-if="isLongpress">
			<view class="title-box">
				已选中{{selectData.length || 0}}件商品
			</view>
			<view class="select-box">
				<view class="select-all">
					<view class="pitch-box" @click="unPitchClick" v-if="selectData.length == discountsList.length">
					</view>
					<view class="un-pitch-box" @click="pitchClick" v-else>
					</view>
					全选
				</view>
				<view class="delete-box">
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commodityItem from '../../components/commodityItem/commodityItem'
	import discountsItem from '../../components/discountsItem/discountsItem'
	export default {
		components: {
			commodityItem,
			discountsItem
		},
		data() {
			return {
				tabs: [{
					name: '多米商邦',
					ID: '0'
				}, {
					name: '多米惠选',
					ID: '1'
				}, {
					name: ' ',
					ID: ''
				}],
				activeData: '0',
				commodityList: [],
				discountsList: [],
				selectData: [],
				isLongpress:false
			}
		},
		onLoad(){
			this.activeData = '0'
			this.getFavlists()
		},
		methods: {
			getFavlists(){
				let params = {
					page:1,
					limit:9999
				};
				let self = this
				self.$https(
					'mine.favlists',
					{
						data: params
					},
					'加载中...'
				).then(res => {
					if (res.code === 1) {
						self.commodityList = res.data.data || []
					}else{
						self.commodityList = []
					}
				});
			},
			getFavoriteList(){
				let params = {
					page:1
				};
				let self = this
				self.$https(
					'mine.favoriteList',
					{
						data: params
					},
					'加载中...'
				).then(res => {
					if (res.code === 1) {
						self.discountsList = res.data.data || []
					}else{
						self.discountsList = []
					}
				});
			},
			tabsChange(item) {
				if (item.ID) {
					this.activeData = item.ID || 0
				}
				if(this.activeData == '0'){
					this.getFavlists()
				}else{
					this.getFavoriteList()
				}
			},
			itemPitchClick(type, id) {
				if (type == 0) {
					// 取消选中
					let index = this.selectData.indexOf(id)
					this.selectData.splice(index, 1)
				} else {
					// 选中
					this.selectData.push(id)
				}
			},
			unPitchClick() {
				this.selectData = []
			},
			pitchClick() {
				this.selectData = this.discountsList.map((item, index) => {
					return item.id
				})
			},
			longpress(){
				this.isLongpress = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs-box {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
	}

	.tabs-item-box {
		width: 150rpx;
		height: 88rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx 4rpx 0rpx;

		.text {
			// width: 100%;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.pitch-icon-box {
			width: 36rpx;
			height: 8rpx;
			background: linear-gradient(80deg, #FD5755 0%, #FF6A68 100%);
			border-radius: 22px 22px 22px 22px;
		}

		.un-pitch-icon-box {
			width: 36rpx;
			height: 8rpx;
			background: #fff;
			border-radius: 22px 22px 22px 22px;
		}
	}

	.commodity-list-box {
		width: 100%;
		height: calc(100vh - 88rpx);
	}

	.discounts-box {
		width: 100%;
		height: calc(100vh - 270rpx);
		overflow-y: scroll;
	}

	.discounts-item-box {
		width: calc(50% - 20rpx);
		float: left;
		margin: 10rpx;
	}

	.all-select-box {
		width: 100%;
		height: 182rpx;

		.title-box {
			width: 100%;
			height: 60rpx;
			padding-left: 30rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.select-box {
			width: 100%;
			height: 92rpx;
			padding: 0rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.select-all {
				width: 200rpx;
				height: 100%;
				display: flex;
				align-items: center;

				.un-pitch-box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 40rpx;
					border: 1px solid #999999;
					margin-right: 20rpx;
				}

				.pitch-box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 40rpx;
					background: #FC5351;
					border: 1px solid #999999;
					margin-right: 20rpx;
				}
			}
			.delete-box{
				width: 180rpx;
				height: 90rpx;
				border-radius: 90rpx;
				border: 1px solid #FC5351;
				background: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FC5351;
			}
		}
	}
</style>
